<template>
    <div class="login">
        <div class="login-con">
            <Card :bordered="false">
                <div class="form-con">
                    <Form ref="loginForm" :model="form" :rules="rules">
                        <FormItem prop="userName">
                            <i-Input v-model="form.userName" placeholder="用户名">
                                <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                            </i-Input>
                        </FormItem>
                        <FormItem prop="password">
                            <i-Input type="password" v-model="form.password" placeholder="密码">
                                <span slot="prepend">
                                    <Icon :size="14" type="locked"></Icon>
                                </span>
                            </i-Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" long>登录</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        userName: "",
        password: ""
      },
      rules: {
        userName: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }
    };
  }
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("https://file.iviewui.com/iview-admin/login_bg.jpg");
  background-size: cover;
  background-position: center;
  position: absolute;
}

.login-con {
  position: absolute;
  right: 160px;
	top: 100px;
  width: 300px;
}
.form-con {
  padding: 10px 0;
}
</style>
